<script setup lang="ts">
// 1. Import the toolbar
import { StagewiseToolbar } from '@stagewise/toolbar-vue';
import { VuePlugin } from '@stagewise-plugins/vue';
import { computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from './components/NavBar.vue'
import { useCategoryStore } from './stores/category'

// 2. Define your toolbar configuration
const stagewiseConfig = {
  plugins: [VuePlugin],
};

const route = useRoute()

// 判断当前路由是否需要显示导航栏
const showNavBar = computed(() => {
  const hideNavBarRoutes = ['/login', '/register', '/forgot','/admin/dashboard', '/admin/users', '/admin/posts', '/admin/resources', '/admin/reports','/admin/login']
  return !hideNavBarRoutes.includes(route.path)
})

const categoryStore = useCategoryStore()
onMounted(() => {
  if (categoryStore.categories.length === 0) {
    categoryStore.fetchCategories()
  }
})
</script>

<template>
  <div class="app">
    <StagewiseToolbar :config="stagewiseConfig" />
    <NavBar v-if="showNavBar" />
    <router-view />
  </div>
</template>

<style scoped>
html, body, #app, .app {
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  min-height: 100vh;
  min-width: 100vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
</style>

<style>
.app {
  min-height: 100vh;
}

/* 为有导航栏的页面添加上边距 */
.app:has(> .navbar) {
  padding-top: 60px;
}
</style>
